<template>
  <div class="common-layout">
    <el-container>
      <el-header height="54px" style="padding: 0">
        <div class="header">
          <div @click="toMySpace" class="logo">Shorten 短链平台</div>

          <div v-if="isAdmin" class="admin-notice">
            演示环境，希望不要删除已有展示链接，您可创建新分组进行调试或已有链接的跳转和访问
          </div>

          <div style="display: flex; align-items: center">
            <a class="link-span" target="_blank" href="https://blog.ktpro.ink/">个人博客</a>
            <a class="link-span" target="_blank" href="https://apifox.com/apidoc/shared-d089f50f-7151-45e6-a22a-212270a85835">接口文档</a>
            <button class="link-span" @click="startModal">Grafana数据看板</button>
            <el-dropdown>
              <div class="block">
                <span class="name-span">{{"用户: " +  username }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="toMine">个人信息</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main style="padding: 0">
        <div class="content-box">
          <RouterView class="content-space" />
        </div>
      </el-main>
    </el-container>

    <!-- 自定义弹窗 -->
    <div id="custom-modal" class="modal" v-if="dialogVisible">
      <div class="modal-content">
        <span class="close-button" @click="closeModal">&times;</span>
        <h2>亲爱的短链用户，你好！</h2>
        <p>我的项目最近引入了 Prometheus + Grafana 的监控方案，你可以点击下面的链接以查看项目的仪表盘数据，<strong>可动态刷新（实时数据）：</strong><a href="http://s.ktpro.ink/4DXlma" target="_blank" class="link">Link</a></p>
        <p>注意：实时数据可以通过手动调用短链接的服务接口，刷新即可看到新增数据</p>
        <div class="button-container">
          <button class="confirm-button" @click="closeModal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { removeKey, removeUsername, getToken, getUsername, isAdmin} from '@/core/auth.js'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const API = proxy.$API
const router = useRouter()
const squareUrl = ref('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')

const toMine = () => {
  router.push('/home' + '/account')
}

const logout = async () => {
  const token = getToken()
  const username = getUsername()
  await API.user.logout({ token, username })
  removeUsername()
  removeKey()
  localStorage.removeItem('token')
  localStorage.removeItem('username')

  //退出登录时，需要把LocalStorage中的弹窗标识删除，下次登录之后即可查看。
  localStorage.removeItem('hasShownModal')

  router.push('/login')
  ElMessage.success('成功退出！')
}

const toMySpace = () => {
  router.push('/home' + '/space')
}

const username = ref('')
const dialogVisible = ref(false)

onMounted(async () => {
  const actualUsername = getUsername()
  const res = await API.user.queryUserInfo(actualUsername)
  username.value = truncateText(actualUsername, 8)

  // 检查是否已经展示过弹窗
  const hasShownModal = localStorage.getItem('hasShownModal')
  //如果没有弹出过窗口才会弹出
  if (!hasShownModal) {
    dialogVisible.value = true
    localStorage.setItem('hasShownModal', 'true')
  }
})

const closeModal = () => {
  dialogVisible.value = false
}

const startModal = () => {
  dialogVisible.value = true
}

const extractColorByName = (name) => {
  var temp = []
  temp.push('#')
  for (let index = 0; index < name.length; index++) {
    temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16))
  }
  return temp.slice(0, 5).join('').slice(0, 4)
}

const truncateText = (text, maxLength) => {
  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
}
</script>

<style scoped>
.el-container {
  height: 100vh;

  .el-aside {
    border: 0;
    background-color: #0e5782;

    ul {
      border: 0px;
    }
  }

  .el-main {
    background-color: #e8e8e8;
  }
}

.header {
  //position: relative; /* 为绝对定位提供参考 */
  background-color: #3B65D8;  /* 修改后的背景颜色 */
  padding: 0 0 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .block {
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 0px;
  }
}

.admin-notice {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
}

.header .link-span {
  color: #ffffff;
  font-size: 16px;  /* 增加字体大小 */
  font-weight: bold;  /* 设置字体粗细 */
  margin: 0 10px;  /* 增加链接之间的间距 */
  transition: color 0.3s;  /* 增加过渡效果 */
  background: none;  /* 移除按钮默认背景 */
  border: none;  /* 移除按钮默认边框 */
  cursor: pointer;  /* 鼠标悬停时显示为手型 */
  text-decoration: none;  /* 移除文本装饰 */
  padding: 0;  /* 移除默认填充 */
}

.header .name-span {
  color: #ffffff;  /* 修改后的字体颜色 */
}

.header .logo {
  color: #ffffff;  /* 修改后的Logo字体颜色 */
}

.content-box {
  height: calc(100vh - 50px);
  background-color: white;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

.logo {
  font-size: 15px;
  font-weight: 600;
  color: #e8e8e8;
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
  'Microsoft YaHei', 'WenQuanYi Micro Hei';
  cursor: pointer;
}

.logo:hover {
  color: #fff;
}

.link-span {
  color: #fff;
  opacity: .6;
  margin-right: 30px;
  font-size: 16px;
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
}

.link-span:hover {
  text-decoration: underline !important;
  opacity: 1;
  color: #fff;
}

.name-span {
  color: #fff;
  opacity: .6;
  margin-right: 30px;
  font-size: 14px;
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avatar {
  transform: translateY(-2px);
}

/* 自定义弹窗样式 */
.modal {
  display: block;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6); /* 更深的背景 */
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  width: 80%; /* 调整弹窗宽度 */
  max-width: 600px; /* 设置最大宽度 */
  font-family: 'Arial', sans-serif; /* 更现代的字体 */
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

h2 {
  margin-top: 0;
  color: #333; /* 标题颜色 */
}

p {
  color: #555; /* 正文颜色 */
  line-height: 1.6; /* 行高 */
}

.credentials, .links {
  margin: 20px 0;
}

.credentials p, .links p {
  margin: 10px 0;
}

.highlight {
  background-color: #f0f0f0; /* 背景高亮 */
  padding: 5px;
  border-radius: 3px;
  color: #333;
  font-weight: bold;
}

a.link {
  color: #2098D5; /* 链接颜色 */
  text-decoration: none;
}

a.link:hover {
  text-decoration: underline;
}

.button-container {
  text-align: center; /* 使按钮容器内的内容居中 */
  margin-top: 20px; /* 增加顶部间距 */
}

.confirm-button {
  background-color: #2098D5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.confirm-button:hover {
  background-color: #197bbd; /* 按钮悬停颜色 */
}
</style>